<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from 'vue';
import QRCodeGenerator from '../../components/QRCodeGenerator.vue';
import { QrcodeStream } from 'vue-qrcode-reader';
import { BrowserMultiFormatReader } from '@zxing/library';
import { useRouter } from 'vue-router';
import { useStore } from '../../store/useStore';
const store = useStore()
const router = useRouter()
const show = ref(false);
const text1 = ref('http://localhost:8080/pron')
const avatarSrc = ref(store.info.avatar)
//扫描
const dataList = ref('')
const result = ref(true)
const error = ref('')
//只能扫描二维码
const onDecode = (res) => {
    dataList.value = res
    result.value = false
    console.log('扫描成功', res[0].rawValue);
    window.location.href = res[0].rawValue
}
const onInit = (promise) => {
    console.log('初始化摄像头', promise)
}
//跳转到相机
const tian = () => {
    router.push('/getuser')
    codeReader.value.reset()
}
const Clear = () => {
    codeReader.value.reset()
    router.back()

}
const fan = () => {
    show.value = false;
    openScan()
}
const qun = () => {
    console.log(111);
    show.value = true;
    codeReader.value.reset()
}

//二维码条形码都可扫描
const codeReader = ref(null);
const scanText = ref('')
const number = ref('')
const openScan = () => {
    codeReader.value = new BrowserMultiFormatReader()
    console.log(codeReader.value);

    codeReader.value.getVideoInputDevices().then(videoDevices => {
        let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
        if (videoDevices.length > 1) {
            firstDeviceId = videoDevices.find(el => { return el.label.indexOf('back') > -1 && el.label.indexOf('0') > -1 }) ?
                videoDevices.find(el => { return el.label.indexOf('back') > -1 && el.label.indexOf('0') > -1 }).deviceId :
                videoDevices[videoDevices.length - 1].deviceId;
        }
        decodeFromInputVideoFunc(firstDeviceId);
    }).catch(err => {
        console.log(err);
    })
}
// 扫码
const decodeFromInputVideoFunc = (firstDeviceId) => {  // 使用摄像头扫描
    codeReader.value.reset(); // 重置
    codeReader.value.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
        if (result) {
            console.log('扫码结果', result);
            scanText.value = result.text;
            window.location.href = result.text
            if (scanText.value) {
                // 识别成功关闭摄像头
                codeReader.value.reset()
                codeReader.value.stopContinuousDecodeFromInputVideoDevice()
            }
        }
    })
}
onMounted(() => {
    openScan()
})
</script>

<template>
    <div class="top">
        <!-- 二维码 -->
        <!-- <QrcodeStream @detect="onDecode" @error="onInit"> -->

        <!-- 二维码条形码 -->
        <video ref="video" id="video" class="scan-video" autoplay>
        </video>
        <div class="scan">
            <div class="line"></div>
            <div class="angle">
            </div>
        </div>
        <div class="nav">
            <van-icon name="clear" size="20" color="#ccc" @click="Clear" />
            <van-icon name="ellipsis" size="25" color="#ccc" />
        </div>

        <div class="top1">
            <div class="top11" @click="qun">
                <p style="border: 1px solid #ccc;width:40px;height:40px;border-radius: 20px;background-color: #ccc;line-height: 40px;
                margin: 0 auto;margin-bottom: 5px;">
                    <van-icon name="contact" size="20" />
                </p>
                <p style="font-size: 13px;font-weight: bold;color: #ccc;">我的二维码</p>
            </div>
            <div class="top11" @click="tian">

                <p style="border: 1px solid #ccc;width:40px;height:40px;border-radius: 20px;background-color: #ccc;line-height: 40px;
                margin: 0 auto;margin-bottom: 5px;">
                    <van-icon name="photo" size="20" />
                </p>
                <p style="font-size: 13px;font-weight: bold;color: #ccc;">相册</p>
            </div>
        </div>

        <!-- </QrcodeStream> -->
    </div>
    <van-popup v-model:show="show" position="right" :style="{ width: '100%', height: '100%' }">
        <div class="popup">
            <div class="nav1">
                <van-icon name="arrow-left" size="20" color="#fff" @click="fan" />
                <van-icon name="ellipsis" size="20" color="#fff" />
            </div>
            <div class="popup1">
                <div class="popup11">
                    <div class="popup111">
                        <p>
                            <img :src="store.info.avatar" alt="">
                        </p>
                        <p>
                        <div style="color: #fff;">
                            {{ store.info.nickname }}
                        </div>
                        <div style="color: #fff;">
                            <span>河北</span>
                            <span>邯郸</span>
                        </div>
                        </p>
                    </div>
                    <QRCodeGenerator :avatarSrc :text1 />
                    <p style="font-size: 12px;color:#fff;text-align: center;margin-top: 30px;">扫一扫上面的二维码图案,加我为朋友</p>
                </div>

            </div>

        </div>
    </van-popup>
</template>

<style scoped>
video {
    height: 100%;
}

.nav {
    width: 95%;
    position: fixed;
    top: 0;
    left: 10px;
    margin: 0 auto;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav1 {
    width: 95%;
    margin: 0 auto;
    /* padding-top: 50px; */
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top {
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    /* height: 100%; */
    height: 100vh;
    /* height: 288px; */
    position: relative;
    background-color: #1110;

}

.scan {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    /* border: 1px solid #3aa5ff; */

}

.line {
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #3aa5ff 211%);
    border-bottom: 1px solid #3aa5ff;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite alternate;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
}

.top .scan:after,
.top .scan:before,
.top .angle:after,
.top .angle:before {
    content: '';
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;
}

.top .scan:after,
.top .scan:before {
    top: 0;
    border-top-color: #3aa5ff;
}

.top .angle:after,
.top .angle:before {
    bottom: 0;
    border-bottom-color: #3aa5ff;
}

.top.scan:before,
.top .angle:before {
    left: 0;
    border-left-color: #3aa5ff;
}

.top .scan:after,
.top .angle:after {
    right: 0;
    border-right-color: #3aa5ff;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

button {
    margin-top: 10px;
}

.top1 {
    width: 85%;
    /* text-align: center; */
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 550px;

}

.top11 {
    text-align: center;
}

.popup {
    width: 100%;
    height: 100%;
    background-color: rgb(199, 181, 79);
}

.popup11 {
    width: 70%;
    margin: 0 auto;
}

.popup111 {
    display: flex;
    width: 110px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.popup111 p img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
</style>
